<template>
  <div>
    <div v-loading="loading" class="edit">
      <!-- 左边部分 -->
      <div class="patient-left">
        <div class="patient-message">
          <div>
            <div>姓名：{{ report.ptName }}</div>
            <div>性别：{{ report.ptSex }}</div>
            <div>检查号：{{ report.ptdtCheckCode }}</div>
          </div>
          <div>
            <div>报告医生：{{ report.ptdtBgDoctor }}</div>
            <div>患者编号：{{ report.ptdtPatientId }}</div>
            <div>患者信息编号：{{ report.ptdeId }}</div>
          </div>
          <div>
            <div>检查类型：{{ report.ptdtCheckMachine }}</div>
            <div>检查名称：{{ report.ptdtCheckName }}</div>
            <div>检查时间：{{ report.ptdtCheckDate }}</div>
          </div>
        </div>
        <!-- 左下 -->
        <div class="patient-content">
          <div class="patient-contentbox">
            <div class="bingshi">
              <div class="content">
                <el-tabs v-model="bingshiIndex" type="card">
                  <el-tab-pane
                    label="简要病史"
                    class="jianyao"
                    disabled
                    name="0">
                    <div>
                      <el-input
                        v-model="report.jcProReadyTxt"
                        type="textarea"
                        readonly="readonly"
                        :rows="12"
                        placeholder="请输入内容" />
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="检查准备" name="1">
                    <div>
                      <el-input
                        v-model="report.jcProReadyTxt"
                        type="textarea"
                        readonly="readonly"
                        :rows="12"
                        placeholder="请输入内容" />
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="检查技术" name="2">
                    <el-input
                      v-model="report.jcReadyTxt"
                      type="textarea"
                      readonly="readonly"
                      :rows="12"
                      placeholder="请输入内容" />
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <div class="suojian">
              <div class="title">检查所见</div>
              <div class="content">
                <el-input
                  v-model="report.jcSjTxt"
                  type="textarea"
                  :readonly="btnStatus == 0 ? false : true"
                  :rows="12"
                  placeholder="请输入内容" />
              </div>
            </div>
            <div class="yijian">
              <div class="title">检查意见</div>
              <div class="content">
                <el-input
                  v-model="report.jcYjTxt"
                  type="textarea"
                  :readonly="btnStatus == 0 ? false : true"
                  :rows="12"
                  placeholder="请输入内容" />
              </div>
            </div>

            <div class="btn">
              <el-button
                v-if="btnStatus == 0 ? true : false"
                type="primary"
                @click="submitReport">提交报告</el-button>
              <el-button
                v-if="btnStatus != 0 ? true : false"
                type="primary"
                class="sub2">提交报告</el-button>
              <el-button
                v-if="btnStatus == 0 ? true : false"
                :plain="true"
                @click="saveTemp">暂时保存</el-button>
              <el-button
                v-if="btnStatus != 0 ? true : false"
                type="primary"
                class="btn2">暂时保存</el-button>
              <el-button @click="$router.go(-1)">返回</el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 右边部分 -->
      <div class="patient-right">
        <el-tabs v-model="activeName" @tab-click="tabClick">
          <el-tab-pane label="历史" name="first">
            <div class="info-card history">
              <div class="card-title">病史内容</div>
              <div
                v-for="(item, index) in survey"
                :key="index"
                class="card-content">
                <div class="time">时间：{{ item.ptdtCheckDate || '无' }}</div>
                <div class="record" style="display: flex">
                  <div style="flex-shrink: 0">内容：</div>
                  <div>
                    {{ item.ptdtBgreadyTxt || '无' }}
                  </div>
                </div>
              </div>
            </div>
            <div class="info-card finding">
              <div class="card-title">检查所见</div>
              <div
                v-for="(item, index) in checkSee"
                :key="index"
                class="card-content">
                <div class="time">时间：{{ item.ptdtCheckDate }}</div>
                <div class="record" style="display: flex; margin-top: 10px">
                  <div style="flex-shrink: 0">内容：</div>
                  <div>{{ item.ptdtCheckSjTxt || '无' }}</div>
                </div>
              </div>
            </div>
            <div class="info-card advice">
              <div class="card-title">检查意见</div>
              <div
                v-for="(item, index) in checkOpinion"
                :key="index"
                class="card-content">
                <div class="time">时间：{{ item.ptdtCheckDate || '无' }}</div>
                <div class="record" style="display: flex">
                  <div style="flex-shrink: 0">内容：</div>
                  <div>{{ item.ptdtCheckyjTxt || '无' }}</div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="截图" name="second">
            <div class="demo-image__preview">
              <el-image
                v-for="(item, index) in jietu"
                :key="index"
                style="width: 200px; height: 200px; border: 1px solid #dcdfe6"
                :src="getImage(item)"
                :preview-src-list="srcList" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="模板" name="third">
            <div class="tree">
              <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
              <el-tree
                ref="tree"
                style="margin-top: 20px"
                class="filter-tree"
                :data="treeData"
                :props="defaultProps"
                :filter-node-method="filterNode"
                :default-expand-all="false"
                @node-click="handleNodeClick" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="序列" name="fourth">
            <div class="table">
              <el-button type="primary" @click="handleSave">保存</el-button>
              <el-button type="danger" @click="handleAppend">追加</el-button>
              <el-select v-model="selectFunction" placeholder="选择方式">
                <el-option
                  v-for="(option, index) in FunctionsOptions"
                  :key="index"
                  :label="option"
                  :value="option" />
              </el-select>
              <el-tooltip effect="dark" content="本地无下载器软件？点击下载！" placement="top">
                <el-button type="primary" @click="downloadSoft">下载器软件</el-button>
              </el-tooltip>

              <el-table
                ref="multipleTable"
                v-horizontal-scroll="'always'"
                :data="xulie"
                height="1000"
                @selection-change="handleSelectChange">
                <el-table-column
                  type="selection"
                  width="50"
                  :selectable="selectable" />
                <el-table-column
                  label="检查部位"
                  prop="bodyPartExamined"
                  fixed
                  align="center"
                  width="120" />
                <el-table-column
                  label="设备商"
                  prop="manufacturer"
                  width="90"
                  align="center" />
                <el-table-column prop="modality" label="设备" />
                <el-table-column
                  prop="modelName"
                  label="设备型号"
                  show-overflow-tooltip
                  align="center" />
                <el-table-column
                  prop="numFrames"
                  label="图像帧总数"
                  width="90"
                  align="center" />
                <el-table-column
                  prop="numSerRelIma"
                  label="图象数"
                  width="80"
                  align="center" />
                <el-table-column
                  prop="radionuclideStartTime"
                  label="注射时间"
                  align="center"
                  width="80" />
                <el-table-column
                  prop="radionuclideTotalDose"
                  label="剂量"
                  align="center"
                  width="80" />
                <el-table-column
                  prop="seriesDescription"
                  label="序列描述"
                  align="center"
                  width="100"
                  show-overflow-tooltip />
                <el-table-column
                  prop="seriesNumber"
                  label="序列号"
                  align="center"
                  width="80" />
                <el-table-column
                  width="100"
                  prop="seriesDate"
                  label="序列时间"
                  align="center" />
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {
SendActions,
getCheckOpinion,
getCheckSee,
getImages,
getSaveEdit,
getSequence,
getSurvey,
getUpdateEdit,
studentReportInfo,
templateData,
templateInfo
} from '@/api/report'
import axios from 'axios'
import dayjs from 'dayjs'
import { v4 as uuidv4 } from 'uuid'

export default {
  data() {
    return {
      imgupdate: process.env.VUE_APP_BASE_API + '/profile/upload/', // 服务器地址
      report: [], // 学生详情
      studentText: {
        // 学生
        reportId: '' // 报告编号
      },
      btnStatus: '', // 老师是否批改的状态
      survey: null, // 患者病史
      checkSee: null, // 患者所见请求
      checkOpinion: null, // 患者意见请求
      bingshiIndex: '1',
      xulie: [], // 序列号---数据
      jietu: [], // 截图---数据
      isTree: false, // 模板显示隐藏
      filterText: '',
      treeData: [], // 树形数据
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 选择列表的数据
      checkedList: [],
      // 限制选择的数量
      limitNum: 2,
      activeName: 'first',
      // 截图---点击放大数据
      srcList: [], // 开启预览大图的功能
      loading: false,
      FunctionsOptions: ['PTFC', 'PETCT', 'PETMR3D', 'PETMR2D'],
      selectFunction: ''
    }
  },
  computed: {
    isTree2() {
      if (this.isTree) {
        return '关闭模板'
      } else {
        return '查看模板'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.loading = true
    console.log(this.$route)
    this.studentText.reportId = this.$route.params.id // 报告id
    this.btnStatus = this.$route.query.status // 老师批改状态
    this.getStudentReportInfo(this.studentText.reportId) // 患者数据

    getSurvey(this.studentText.reportId).then((res) => {
      // 患者病史
      if (res.code == 200) {
        this.survey = res.data.map((item) => {
          item.ptdtCheckDate = dayjs(item.ptdtCheckDate).format('YYYY-MM-DD')
          return item
        })

        console.log(this.survey[0])
      }
    })
    getCheckSee(this.studentText.reportId).then((res) => {
      // 对其中的时间数据进行格式化
      this.checkSee = res.data.map((item) => {
        item.ptdtCheckDate = dayjs(item.ptdtCheckDate).format('YYYY-MM-DD')
        return item
      })
    })

    getCheckOpinion(this.studentText.reportId).then((res) => {
      // 患者意见请求
      if (res.code == 200) {
        this.checkOpinion = res.data
      }
    })

    templateData()
      .then((res) => {
        if (res.code == 200) {
          this.treeData = res.data.public
        }
      })
      .finally(() => {
        this.loading = false
      })
  },

  methods: {
    // 点击复选框时触发
    handleSelectChange(list) {
      if (list.length > this.limitNum) {
        this.limitFn(list)
        return
      }
      // 获取所有的数据
      this.checkedList = list
      // this.checkedList = [...list];
    },
    // 限制选择数量
    limitFn(list) {
      this.$refs.multipleTable.clearSelection()
      for (let i = 0; i < this.limitNum; i++) {
        this.$refs.multipleTable.toggleRowSelection(list[i])
      }
    },
    // 判断复选框是否可以选择
    selectable(row) {
      const index = this.checkedList.findIndex(
        (v) => v.seriesInst === row.seriesInst
      )
      if (this.checkedList.length >= this.limitNum) {
        if (index !== -1) {
          return true
        } else {
          return false
        }
      } else {
        return true
      }
    },
    downloadSoft() {
      this.$confirm('是否下载下载器软件？')
        .then(_ => {
          setTimeout(() => {
            window.location.href = `http://172.20.128.6:8089/tspetsetup1.0.3.exe`
          }, 3000)
          window.location.href = `http://172.20.128.6:8089/融合软件[TEST].x64.20230810-FULL.rar`
        })
        .catch(_ => { })
    },

    // 点击追加按钮
    async handleAppend() {
      if (this.checkedList.length > 0) {
        // 生成uuid
        const uuv4 = uuidv4()
        let uuid = ''
        // 加工处理得到需要的uuid
        uuv4.split('-').forEach((item) => {
          uuid += item
        })
        if (this.selectFunction == '') {
          this.$message.error('请选择函数方式')
          return
        }
        console.log('action', uuid)
        const list = {
          function: this.selectFunction,
          action: 'append',
          uuid,
          series: [...this.checkedList]
        }
        console.log(list, 'ffsdddssd')
        const res = await SendActions(list)
        if (res.code == 200) {
          window.location.href = `tspet://append/${uuid}`
          setTimeout(() => {
            this.$message.error('你还没有软件，开始下载')
            axios.get('http://172.20.128.6:8089/tspetsetup1.0.3.exe')
            axios.get(
              'http://172.20.128.6:8089/融合软件[TEST].x64.20230810-FULL.rar'
            )
          }, 2000)

          // console.log('13454641347674')
        }
      } else {
        this.$message.error('你还未选择，请先选择')
      }
    },

    // 点击保存按钮
    async handleSave() {
      if (this.checkedList.length > 0) {
        // 生成uuid
        const uuv4 = uuidv4()
        let uuid = ''
        uuv4.split('-').forEach((item) => {
          uuid += item
        })
        if (this.selectFunction == '') {
          this.$message.error('请选择函数方式')
          return
        }
        const list = {
          function: this.selectFunction,
          action: 'open',
          uuid,
          series: [...this.checkedList]
        }
        // console.log(list)
        const res = await SendActions(list)
        // console.log(res)
        if (res.code == 200) {
          try {
            window.location.href = `tspet://open/${uuid}`
          } catch (error) {
            this.$message.error('你还没有软件，开始下载')
            await axios.get('/http://172.20.128.6:8089/tspetsetup1.0.3.exe')
            await axios.get(
              '/http://172.20.128.6:8089/融合软件[TEST].x64.20230810-FULL.rar'
            )
          }
        }
      } else {
        this.$message.error('你还未选择，请先选择')
      }
    },
    // 点击下载
    handleDownLoad(e) {
      console.log(e)
    },

    async getStudentReportInfo(reportId) {
      // 初始渲染数据
      const data = await studentReportInfo(reportId)
      this.report = data.data
      console.log('患者信息', this.report)
      this.getSequenceList(this.report.studyInsta)
      this.getPictureList(this.report.studyInsta)
    },
    // studyInsta
    async getSequenceList(studyInsta) {
      // 获取序列号
      console.log(studyInsta)
      const res = await getSequence(studyInsta)
      console.log('序列号', res)
      if (res.code == 200) {
        this.xulie = res.data
      }
    },

    saveTemp() {
      // 暂时保存
      this.studentText.jcProReadyTxt = this.report.jcProReadyTxt
      this.studentText.jcReadyTxt = this.report.jcReadyTxt
      this.studentText.jcSjTxt = this.report.jcSjTxt
      this.studentText.jcYjTxt = this.report.jcYjTxt

      getSaveEdit(this.studentText).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '暂时保存成功！'
          })
        }
      })
    },

    async subReportData(options) {
      // 提交报告接口
      getUpdateEdit(options).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '提交报告成功！'
          })
        }
      })
    },

    async getPictureList(studyInsta) {
      // 获取截图
      const res = await getImages(studyInsta)
      console.log(res.data, 'asdasds')
      if (res.code == 200) {
        this.jietu = res.data
      }
    },

    submitReport() {
      // 点击---提交报告
      this.$confirm('是否提交报告?提交之后不可再修改', '提交报告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.studentText.jcProReadyTxt = this.report.jcProReadyTxt
          this.studentText.jcReadyTxt = this.report.jcReadyTxt
          this.studentText.jcSjTxt = this.report.jcSjTxt
          this.studentText.jcYjTxt = this.report.jcYjTxt
          if (this.report.jcSjTxt == null || this.report.jcYjTxt == null) {
            this.$message({
              type: 'error',
              message: '检查所见和检查意见不能为空！'
            })
          } else {
            this.subReportData(this.studentText)
            this.$router.push({
              path: '/report/report',
              query: { reportId: this.report.reportId }
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消提交报告！'
          })
        })
    },

    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },

    // 点击节点
    handleNodeClick(data) {
      const { id, pid } = data
      templateInfo(id, pid).then((res) => {
        if (res.code == 200) {
          if (res.data) {
            const { libCheckSj, libCheckYj } = res.data
            this.report.jcSjTxt = libCheckSj
            this.report.jcYjTxt = libCheckYj
          }
        }
      })
    },

    tabClick() {
      console.log(111)
    },
    getImage(url) {
      return `http://115.158.64.27:8089${url}`
    }
  }
}
</script>

<style lang="scss" scoped>
$border: 1px solid #ececec;
div {
  box-sizing: border-box;
}
.edit {
  box-sizing: border-box;
  margin: 40px auto;
  display: flex;

  //左边
  .patient-left {
    display: block;
    width: 800px;

    .patient-message {
      //左边头部
      width: 95%;
      height: 112px;
      margin-left: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: start;
      align-items: center;
      border-radius: 15px;
      background: #e5f5ff;
      box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
      // border: 1px groove rgba(150, 215, 255, 0.242);
      border: $border;
      padding: 10px 30px;
      box-sizing: border-box;
      font-size: 16px;
      line-height: 30px;
      div {
        padding: 0px 6px;
      }
    }

    .patient-content {
      margin-left: 20px;
      margin-top: 15px;
      width: 95%;
      border: 1px solid #ececec;
      background: #ffffff;
      box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
      .patient-contentbox {
        height: 100%;
        margin: 15px;
        // box-shadow: 4px 4px 25px 2px rgba(156, 152, 152, 0.308);
        overflow-y: auto;

        ::v-deep .el-textarea__inner {
          // background-color: rgba(150, 215, 255, 0.242);
          box-shadow: 7px 7px 15px #bebebe;
          backdrop-filter: blur(7px);
          border-radius: 15px;
          background: #ffffff;

          transition: all 0.3s;
          cursor: pointer;
        }
      }
      .bingshi {
        border: $border;

        display: flex;

        .title {
          width: 130px;
          height: 100%;
          line-height: 260px;
          text-align: center;
          border: $border;
          background-color: #fafafc;
        }
        .content {
          line-height: 30px;
          flex: 1;
          height: 100%;
          box-sizing: border-box;
          overflow: hidden;
          border-radius: 15px;
          background: #ffffff;
          box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
        }
      }
      .btn {
        text-align: center;
        height: 72px;
        line-height: 72px;
      }
    }

    .bingshi ::v-deep .el-tabs__header {
      margin: 0;
    }

    .bingshi ::v-deep .el-tabs {
      height: 100%;
      overflow: hidden;
    }

    .suojian,
    .yijian {
      border: $border;
      margin-top: 20px;
      .title {
        background-color: #e5f5ff;
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
        font-weight: bold;
        font-size: 18px;
        border-bottom: $border;
      }
      :deep(textarea) {
        border: none;
      }
    }
  }

  //右边
  ::v-deep .table {
    width: 590px !important;
  }
  ::v-deep .el-tabs__nav-scroll {
    background-color: #e5f5ff;
  }
  .patient-right {
    width: 750px;

    background-color: #ffffff;
    border: $border;
    padding: 10px;
    backdrop-filter: blur(7px);
    background-color: rgba(255, 255, 255, 0.5);
    background: #ffffff;
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 8px #ebe7e7;
    // box-shadow: 4px 0px 15px 2px rgba(156, 152, 152, 0.196);
    // background-color: rgba(150, 215, 255, 0.242);
    // :deep(.el-tabs) {
    //   .el-scrollbar__bar {
    //     .is-horizontal {
    //       height: 12px !important;
    //     }
    //   }
    // }

    ::v-deep .el-scrollbar__thumb {
      background-color: skyblue;
      background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
    }
    ::v-deep .is-horizontal {
      width: 98%;
      background: #ededed;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      height: 10px !important;
    }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      // width: 20px; /* 纵向滚动条 */
      height: 8px; /* 横向滚动条 必写 */
    }
    /* 设置滚动条样式 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
      // background-color: #dde;
      border-radius: 3px;
    }
    ::v-deep .el-table__body-wrapper {
      height: 1000px;
    }

    .el-table {
      height: 100%;
      .el-table__fixed {
        height: auto !important;
        bottom: 8px !important; //具体值是多少根据你横向滚动条的高度进行设置
      }
    }
    //去掉固定列下方的横线
    .el-table__fixed::before,
    .el-table__fixed-right::before {
      display: none;
    }
    ::v-deep .el-tabs__header {
      background-color: #e5f5ff;
    }
    ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: space-around;
      margin: 0;
      .bs,
      .sj,
      .yj {
        border-bottom: $border;
        padding: 8px 0px;
      }
      .content {
        line-height: 30px;
        height: 240px;
        padding: 15px 0;
        overflow-y: auto;
      }

      .bs::before,
      .sj::before,
      .yj::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 16px;
        background-color: #44b1f4;
        margin-right: 5px;
        vertical-align: middle;
      }
    }
  }
}

.edit::before {
  content: '';
  position: fixed;
  z-index: -1;
  background-size: 100% auto;
  background-color: #f6f7fb;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0px;
  margin: 0px;
}

// 查看模板
// 模板
.template {
  position: fixed;
  right: 0;
  width: 650px;
  background-color: white;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 14%);
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

.lyric-enter,
.lyric-leave-to {
  opacity: 0;
  transform: translateX(650px);
}
.lyric-enter-to,
.lyric-leave {
  opacity: 1;
}
.lyric-enter-active,
.lyric-leave-active {
  transition: all 0.5s;
}
.el-textarea {
  width: 100%;
  height: 100%;
  textarea {
    width: 100%;
    height: 100%;
    line-height: 28px;
  }
}

// 详情信息
.info-card {
  // background-color: red;
  padding: 10px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
  .card-title {
    position: relative;
    height: 16px;
    color: #409eff;
    line-height: 16px;
    padding-left: 12px;
    margin-bottom: 15px;
    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      left: 0px;
      width: 6px;
      height: 16px;
      background-color: #409eff;
    }
  }
  .card-content {
    font-size: 14px;
    line-height: 20px;
    color: #606266;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    *word-wrap: break-word;
    *white-space: normal;
  }
}

.tree {
  overflow-y: auto;
}

// 滚动条样式
div ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
div ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
div ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}
::v-deep .el-tabs__nav .is-disabled {
  color: black;
  font-weight: bold;
  font-size: 18px;
}
.demo-image__preview {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .el-image {
    margin-top: 10px;
  }
}
</style>
